@import url("base.less");
// 创建变量1vw = 3.75px( 设计稿为375px的宽度 )
@basesize: 3.75vw;
// 头部
.suspensiong-box {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1;
  .hot {
    height: (44 / @basesize);
    padding: 0 (12 / @basesize) 0 (18 / @basesize);
    display: flex;
    justify-content: space-between;
    align-items: center;
    // logo
    .logo {
      i {
        font-size: 30px;
        color: #f69;
      }
    }
    // 右侧
    .right {
      width: (160 / @basesize);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      .search {
        i {
          font-size: (22 / @basesize);
          color: #ccc;
        }
      }
      .face {
        width: (24 / @basesize);
        height: (24 / @basesize);
        width: (24 / @basesize);
        border-radius: 50%;
        background-color: #e7e7e7;
        font-size: (9 / @basesize);
        font-weight: 600;
        color: #f69;
        text-align: center;
        line-height: (24 / @basesize);
        white-space: nowrap;
      }
      .install-app {
        width: (72 / @basesize);
        height: ( 24 / @basesize);
        background-color: #f69;
        border-radius: 1.06667vw;
        text-align: center;
        line-height: (24 / @basesize);
        font-size: (11 / @basesize);
        color: #fff;
      }
    }
  }
  .channel-menu {
    position: relative;
    height: (40 / @basesize);
    display: flex;
    align-items: center;
    .header-tabs {
      position: relative;
      flex:1;
      height: 100%;
      display: flex;
      overflow: hidden;
      a {
        height: 100%;
        padding: 0 (16 / @basesize);
        font-size: (14 / @basesize);
        white-space: nowrap;
        line-height: (40 / @basesize);
      }
      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: (28 / @basesize);
        height: (2 / @basesize);
        background-color: #f69;
        transform: translateX((16 / @basesize));
      }
    }
    .header-after {
      width: (40 / @basesize);
      height: (20 / @basesize);
      text-align: center;
      i {
        font-size: (20 / @basesize);
        color: #ccc;
      }
    }
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(.5);
      background-color: #e7e7e7;
    }
  }
}
// 视频列表
.video-list-box {
  margin-top: (84 / @basesize);
  padding: 0 (5 / @basesize);
  .video-list {
    display: flex;
    flex-wrap: wrap;
    .v-card {
      display: block;
      width: 50%;
      padding: (8 / @basesize) (5 / @basesize);
      box-sizing: border-box;
      .card {
        position: relative;
        &::before {
          content: '';
          display: block;
          padding-bottom: (97 / @basesize);
        }
        img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .count {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: (27 / @basesize);
          padding: (5 / @basesize) (6 / @basesize);
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-image: linear-gradient(0deg,rgba(0,0,0,.85), transparent);
          span{
            &[class^=data-] {
                font-size: (12 / @basesize);
                font-family: PingFangSC-Regular;
                color: #fff;
                i {
                  font-family: iconfont !important;
                  font-size: (16 / @basesize);
                  margin-right: (5 / @basesize);
                  vertical-align: bottom;
                }
              }
          }
        }
      }
      .title {
        font-size: (12 / @basesize);
        color: #212121;
        margin-top: (6 / @basesize);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        // text-overflow: ellipsis;
      }
    }
  }
}
// 打开app,footer
.open-app {
  position: fixed;
  bottom: (30 / @basesize);
  left: 0;
  width: 100%;
  height: (36 / @basesize);
  z-index: 1;
  .open-box {
    width: (357 / @basesize);
    height: 100%;
    margin: 0 auto;
    border-radius: (18 / @basesize);
    background-color: #fb7299;
    color: #fff;
    text-align: center;
    line-height: (36 / @basesize);
    box-shadow: 0 0.53333vmin 2.66667vmin rgba(0, 0, 0, .2);
    i {
      font-size: (16 / @basesize);
      margin-right: (10 / @basesize);
    }
    span {
      font-size: (14 / @basesize);
    }
  }
}